<template>
	<view>
		<!-- 分类 -->
		<view class="head" :style="{'background':color}">
			<text class="title" 
			:class="{'active':excId==index}" 
			v-for="(item,index) in itTitle" 
			:key="index" 
			:data-id="index"
			@click="onTitle">{{item}}</text>
			<!-- <text class="title">积分兑换</text>
			<text class="title">积分/余额兑换</text> -->
		</view>
		<!-- 内容模板 -->
		<view class="integrals">
			<swiper :style="{'height': swiperHeight+'rpx'}" @click="onSwiper">
				<swiper-item>
					<Product1 class="product" :class="{'none':Productid!=0}"
					:product="product" 
					:cartId='cartId' 
					:bool="false"
					></Product1>
					<Product3 class="product" :class="{'none':Productid!=2}"
					:product="product" 
					:cartId='cartId' 
					:bool="false"
					></Product3>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex";
	
	import IntegralMall from '@/components/integral-mall.vue';
	import Product1 from '@/components/product/product1.vue';
	import Product3 from '@/components/product/product3.vue'; 
	export default {
		components:{
			IntegralMall,
			Product1,
			Product3,
		},
		computed:{
			...mapState(['color']),
		},
		data() {
			return {
				Productid: 2, // 0/2/
				cartId: 4,
				excId: 0,
				itTitle:['全部','积分兑换','积分/余额兑换'],
				// 产品列表(传到组件中的)
				product: [{
					Img:'',
					name: 'sdfaf',
					price: '50.00'
				},{
					Img:'',
					name: 'sdfaf',
					price: '50.00'
				},{
					Img:'',
					name: 'sdfaf',
					price: '50.00'
				},],
				swiperHeight: '',
			};
		},
		onLoad() {
			//通过vuex来控制按钮中的title值
			let title = this.Productid==3?'立即兑':'立即兑换';
			this.shoppCart(title);
			uni.$on('Height',res=>{
				console.log(res);
				this.swiperHeight = res;
			})
		},
		onUnload() {
			//移除
			uni.$off('Height',this.swiperHeight);
		},
		methods:{
			...mapMutations(['shoppCart']),
			onTitle(e){
				this.excId = e.target.dataset.id;
			},
			onSwiper(){
				
			},
			height(){
				// console.log('11')
			},
		},
	}
</script>

<style lang="scss">
	.head{
		background: linear-gradient(left,#75c1ff,#3a97ff);
		width: 100%;
		height: 118upx;
		line-height: 118upx;
		display: flex;
		justify-content: space-around;
		// background-color: #000;
		position: fixed;
		top: 0upx;
		z-index: 100;
		.title{
			color: #fff;
			font-size: 32upx;
			align-items: center;
		}
		.active{
			color: #000;
		}
	}
	.integrals{
		margin-top: 120upx;
		position: absolute;
		width: 100%;
		.product{
			position: relative;
		}
	}
	
</style>
